<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图 -->
    <el-card>
      <!-- 权限列表区域 -->
      <el-table :data="menusList" row-key="id" default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                max-height="430" border stripe>
        <el-table-column type="index" fixed></el-table-column>
        <el-table-column label="权限id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="父权限id" prop="pid" v-if="false"></el-table-column>
        <el-table-column label="权限名称" prop="name" width="200px" fixed></el-table-column>
        <el-table-column label="权限备注" prop="remark" width="200px"></el-table-column>
        <el-table-column label="路由地址" prop="path" width="150px"></el-table-column>
        <el-table-column label="菜单栏" width="100px">
          <template slot-scope="scope">
            <el-switch active-value="显示" inactive-value="隐藏" v-model="scope.row.visible"
                       @change="menuVisibleChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100px">
          <template slot-scope="scope">
            <el-switch active-value="启用" inactive-value="禁用" v-model="scope.row.status"
                       @change="menuStatusChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="菜单图标" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="组件路径" prop="component" width="200px"></el-table-column>
        <el-table-column label="权限标识" prop="perms" width="300px"></el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      menusList: []
    }
  },
  created() {
    this.getMenusList()
  },
  methods: {
    getMenusList() {
      this.$http.get('/driver/menu/list').then(res => {
        if (res.data.code === 200) {
          this.menusList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },

    // 监听 switch 开关状态的改变
    menuVisibleChanged(menuVisible){
      let status
      if (menuVisible.status === '显示') {
        status = '隐藏'
      } else if (menuVisible.status === '隐藏'){
        status = '显示'
      }
      this.$http.get("/driver/menu/change/visible", {
        params: {
          menuId: menuVisible.id,
          visible: menuVisible.visible
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        } else {
          menuVisible.status = status
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        menuVisible.status = status
        this.$message.error(err.message)
      })
    },

    // 监听 switch 开关状态的改变
    menuStatusChanged(menuStatus){
      let status
      if (menuStatus.status === '启用') {
        status = '禁用'
      } else if (menuStatus.status === '禁用'){
        status = '启用'
      }
      this.$http.get("/driver/menu/change/status", {
        params: {
          menuId: menuStatus.id,
          status: menuStatus.status
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        } else {
          menuStatus.status = status
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        menuStatus.status = status
        this.$message.error(err.message)
      })
    }
  }

}
</script>

<style scoped>

</style>
